<template>
  <div class="common-layout bg-base-200">
    <el-container :style="container">
      <el-header :style="container" style="z-index: 20">
        <el-affix :offset="0">
          <NavigationMenu />
        </el-affix>
      </el-header>

      <el-main :style="maincontainer">
        <router-view></router-view>
      </el-main>
      <el-footer v-if="isshow" :style="container" style="height: 30px"> </el-footer>
    </el-container>
  </div>
</template>

<script>
import { provide, ref, onUpdated } from 'vue'
import Cfg from '@/config/config'
import { useRoute } from 'vue-router'
/** 顶部导航栏 */
import NavigationMenu from './navigation/NavigationMenu.vue'

/** 页面主体框架 */
export default {
  name: 'XyHome',
  components: {
    NavigationMenu,
  },
  setup() {
    const route = useRoute()

    let windowwidth = ref(document.body.clientWidth)

    let immediate = true
    // 窗口变化监听
    window.onresize = () => {
      if (immediate) {
        immediate = false
        setTimeout(() => {
          windowwidth.value = document.body.clientWidth
          pageup(document.body.clientWidth)
          immediate = true
        }, 200)
      }
    }

    onUpdated(() => {
      console.log('更新组件')
      pageup(windowwidth.value)
    })

    function pageup(width) {
      if (route.name === 'xiangqing' && width <= 480) {
        console.log('手机')
        Cfg.config.homestyle.isshow = false
        Cfg.config.homestyle.maincontainer = {
          padding: '20px',
        }
      } else if (route.name === 'xiangqing') {
        console.log('pc')
        Cfg.config.homestyle.isshow = true
        Cfg.config.homestyle.maincontainer = {
          height: 'calc(100vh - 90px)',
          overflowY: 'hidden',
          padding: '0px 20px',
        }
      }
    }
    let theme = ref('cupcake')
    provide('windowwidth', windowwidth)
    provide('theme', theme)

    pageup(windowwidth.value)

    return {
      ...Cfg.config.homestyle,
    }
  },
}

// const body = document.querySelector("body");
// body.addEventListener("mouseenter", () => {
//   body.style.animationPlayState = "running";
// });

// body.addEventListener("mouseleave", () => {
//   body.style.animationPlayState = "paused";
// });
</script>

<style>
/* 添加 class="hide-scrollbar" 使用 */
/* 隐藏滚动条样式 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  /* 添加伪元素来覆盖滚动条 */
  position: relative;
  overflow: hidden;
}

.hide-scrollbar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  background-color: #fff;
}

/** 滚动条样式 */

*::-webkit-scrollbar {
  /* 设置滚动条的宽度 */
  width: 12px;
}

*::-webkit-scrollbar-track {
  /* 设置滚动条的背景颜色 */
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

*::-webkit-scrollbar-thumb {
  /* 设置滚动条的颜色 */
  background: #eee;
}

*::-webkit-scrollbar-thumb:hover {
  /* 设置滚动条悬停时的颜色 */
  background-color: #eee;
}

/** tag标签左右加空格 */
.el-tag {
  margin: 0px 5px;
}
</style>
